<template>
    <div>
        <van-nav-bar
            title="操作指南"
            left-text=""
            left-arrow
            @click-left="onClickLeft('myView')"
        />
        <van-collapse v-model="activeNames">
            <van-collapse-item title="用户注册" name="1">
                <!-- <div>1、绑定微信后需要绑定手机号，手机号是本平台唯一识别用户的标识</div>
                <div>2、注册用户信息，填写车牌号、选择您要洗车的店铺，确认提交即可</div>
                <div>3、完成充值到您要洗车的门店就可以进店洗车了</div> -->
                {{ tbcarinfo.registration }}
            </van-collapse-item>
            <van-collapse-item title="添加车辆" name="2">
                {{tbcarinfo.acar}}
            </van-collapse-item>
            <van-collapse-item title="充值缴费" name="3">
               {{ tbcarinfo.payment }}
            </van-collapse-item>
            <van-collapse-item title="删除车辆" name="4">
                {{ tbcarinfo.dcar }}
            </van-collapse-item>
            <van-collapse-item title="联系店主" name="5">
                {{tbcarinfo.contact}}
            </van-collapse-item>
            <van-collapse-item title="退款流程" name="6">
                {{tbcarinfo.rebate}}
            </van-collapse-item>
        </van-collapse>
    </div>
</template>
<script>
import { Toast } from "vant";
import Vue from 'vue';
import { Collapse, CollapseItem } from 'vant';
import { Image as VanImage } from 'vant';

Vue.use(VanImage);
Vue.use(Collapse);
Vue.use(CollapseItem);
export default {
    data() {
        return {
            activeNames: ['1'],
            tbcarinfo:{ 
                
            }
        };
    },
    created(){
        this.loadData();
    },
    mounted(){

    },
    methods: {
        loadData(){
            var _this=this;
            this.$http
            .get(
                "/tbAcarInfo/queryAll"
            )
            .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            alert(JSON.stringify(response.data.data))
            //this不可以直接使用 代表的是axios对象
            _this.tbcarinfo = response.data.data[0];
            // _this.mendian();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
        },

        onClickLeft(uri) {
        Toast('');
        this.$router.push(uri,()=>{},()=>{});
        },
    },
    components: {
        // 组件注册的地方 相当于pom文件
    },
} 
</script>
<style>
.van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 21px;
    line-height: 24px;
    text-align: left;
    background-color: #fff;
}
.van-collapse-item__content {
    padding: 12px 16px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
    background-color: #fff;
}
</style>